
{% extends 'base.html.twig' %}

{% block stylesheets %}
{{ css('css/sweet-alert.css') }}
<style>
    #body {
        background: transparent url('{{ imgsrc("images/gamebg.jpg") }}?v=2') no-repeat top center;
        background-size: cover;
    }
    .info-wrapper { padding-top: 8%; }
    .headimg {  display: block; margin: 0px auto; width: 70px; }
    .info-wrapper .title { display: block; margin: 20px auto; }
    .myform { 
        width: 210px; margin: 0 auto; display: block; 
    }
    .myform input, .myform textarea { 
        background: none; padding: 5px; background-color: #fff;
        display: block; box-sizing: border-box;
        width: 100%; font-size: 14px; color: #003b63;
    }
    .myform input::-webkit-input-placeholder  {
        color: white; text-shadow: none; 
    }
    .myform .label { display: inline-block; width: 30px; margin: 7px 5px 0 0; float: left; }
    .myform .inp-wrapper { 
        width: 150px; display: inline-block; height: 40px; 
    }
    #btnsubmit  { display: block; margin: 20px auto 0; width: 120px; }
    #btnsubmit img {  width: 100%; }
    .success { width: 208px; margin: 100px auto 0; }
    .unlucky .title { display: block; margin: 0 auto; padding-top: 30%; width: 158px; }
    .unlucky .yang { display: block; margin: 15px auto; width: 127px; }
    .btn-wrapper { margin: 30px auto 0; width: 225px; }
    .btn-wrapper .btn { display: block;  width: 110px; }
    .btn-wrapper .btn1 { float: left; }
    .btn-wrapper .btn2 { float: right; }
    .btn-wrapper .btn img { width: 100%; }
    .aftersubmit { display:none; padding-top: 10%; }
    .aftersubmit .title { display: block; margin: 20px auto; width: 194px; }
    .btnshare { display: block; margin: 15px auto; width: 110px; }
    .btnshare img { width: 100%; }
    .overlay .share { width: 100%; }
    @media all and (max-height: 460px) {
        .info-wrapper { 
            padding-top: 20px;
            transform: scale3d(0.9, 0.9, 1);
            -webkit-transform: scale3d(0.9, 0.9, 1);
        }
    }
    @media all and (max-height: 420px) {
        .info-wrapper { padding-top: 0px; }
    }
</style>
{% endblock %}
{% block body %}
<div id="body">
    {% if reward %}
    <div class='info-wrapper'>
        <img class='headimg' src='{{ imgsrc("images/receipthead.png") }}' />
        {% if reward == 1 %}
        <img class='title' style='width: 159px' src='{{ imgsrc("images/prize1.png") }}?v=1' />
        {% elseif reward == 2 %}
        <img class='title' style='width: 142px' src='{{ imgsrc("images/prize2.png") }}?v=1' />
        {% elseif reward == 3 %}
        <img class='title' style='width: 135px' src='{{ imgsrc("images/prize3.png") }}?v=1' />    
        {% endif %}
        <form class='myform' method='POST' >
            <img class='label' src='{{ imgsrc("images/name.png") }}' />
            <div class='inp-wrapper'>
                <input type='text' name='name' id='name' value='{{ app.user.name }}' placeholder='请输入姓名' />
            </div>
            <img class='label' src='{{ imgsrc("images/mobile.png") }}' />
            <div class='inp-wrapper'>
                <input type='tel' name='mobile' id='phone' value='{{ app.user.mobile }}' placeholder='请输入手机号' />
            </div>
            
            <button id='btnsubmit' type='submit' name='submit'>
                <img src='{{ imgsrc("images/btnok.png") }}'/>
            </button>
        </form>
    </div>
    <div class='aftersubmit'>
        <img class='headimg' src='{{ imgsrc("images/receipthead.png") }}' />
        <img class='title' src='{{ imgsrc("images/sendprize.png") }}' />
        <div class='btn-wrapper clearfix'>
            <a class='btn btn1' href='{{ urlFor("game")}}'><img src='{{ imgsrc("images/btnagain3.png") }}'></a>
            <a class='btn btn2' href='{{ urlFor("draw")}}'><img src='{{ imgsrc("images/btnraffle2.png") }}'></a>
        </div>
        <a class='btnshare' href='#'><img src='{{ imgsrc("images/btnshare.png")}}'></a>
    </div>
    <div class='overlay'>
        <img class='share' src='{{ imgsrc("images/share.png") }}?v=2'>
    </div>
   {% else %}
        <div class='unlucky'>
            <img class='title' src='{{ imgsrc("images/noprize.png") }}?v=2' />
            <img class='yang' src='{{ imgsrc("images/yang.png") }}?v=2' />
            <div class='btn-wrapper clearfix'>
                <a class='btn btn1' href='{{ urlFor("game")}}'><img src='{{ imgsrc("images/btnagain3.png") }}'></a>
                <a class='btn btn2' href='{{ urlFor("draw")}}'><img src='{{ imgsrc("images/btnraffle2.png") }}'></a>
            </div>
        </div>
   {% endif %}
</div>
        
{% endblock %}

{% block javascripts %}
{{ js('js/sweet-alert.min.js') }}
<script>

$(function(){
    $('#body, .info-wrapper').height(h);
    
    $('.btnshare').click( function(e){
        e.preventDefault();
        $('.overlay').velocity('fadeIn');
        $('.overlay').velocity('fadeOut', { delay: 2000 });
    });
    
    $('.myform').submit(function(){
        var name = $('#name').val();
        if (name.length === 0) {
            swal({
                title: '请填写姓名',
                confirmButtonColor: '#0889D6',
                text: '',
                type: 'error'
            });
            return false;
        }
        var mobile = $('#phone').val();
        if (mobile.length === 0) {
            swal({
                title: '请填写电话',
                confirmButtonColor: '#0889D6',
                text: '',
                type: 'error'
            });
            return false;
        }
        var pattern = /^1\d{10}/;
        if (!pattern.test(mobile)) {
            swal({
                title: '请正确填写电话',
                confirmButtonColor: '#0889D6',
                text: '',
                type: 'error'
            });
            return false;
        }
        
        $.ajax({
            url: '{{ urlFor('receipt')}}',
            type: 'POST',
            data: {
                name: name,
                mobile: mobile,
                submit: 1
            },
            success: function(rsp){
                swal({
                    title: '提交成功',
                    text: '',
                    type: 'success'
                }, function(){
                    $('.info-wrapper').hide();
                    $('.aftersubmit').velocity('fadeIn');
                });
            }
        });
        return false;
    });
});
{% if reward == 1 %}
shareContent = '下手不狠，肾6就跑！我抢到iPhone 6一台，不服来抢！'; 
timelineContent = '下手不狠，肾6就跑！我抢到iPhone 6一台，不服来抢！'; 
{% elseif reward == 2 %}
shareContent = '我抢到150M流量红包啦，心动有木有，快来试试吧！'; 
timelineContent = '我抢到150M流量红包啦，心动有木有，快来试试吧！'; 
{% elseif reward == 3 %}
shareContent = '我抢到30M流量红包啦，心动有木有！';
timelineContent = '我抢到30M流量红包啦，心动有木有！';
{% else %}

shareContent = '羊年来到，好礼送到，iPhone 6和流量红包等您拿，谁是幸运财神？';    
{% endif %}

</script>
{% endblock %}